<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">	
		<!--<script src="js/bundle.js"></script>-->
		<link rel="stylesheet" href="../css/test.css"></link>
	</head>
	<body>
		hello
		<div id='body'>
		</div>
		<script src="../js/lib/ar/react.min.js"></script>
		<script src="../js/lib/ar/react-dom.min.js"></script>
		<script src="../js/lib/ar/browser.min.js"></script>
		<script src="../js/lib/ar/react-bootstrap.min.js"></script>
		<script src="../js/test.js"></script>
		
		<script type="text/babel">
			var mountNode = document.getElementById('body')
			
			var ButtonToolbar = ReactBootstrap.ButtonToolbar;
			var Button = ReactBootstrap.Button;
			
			const buttonsInstance = (
			  <div>
			    <ButtonToolbar>
			      <Button bsStyle="primary" bsSize="large">Large button</Button>
			      <Button bsSize="large">Large button</Button>
			    </ButtonToolbar>
			    <ButtonToolbar>
			      <Button bsStyle="primary">Default button</Button>
			      <Button>Default button</Button>
			    </ButtonToolbar>
			    <ButtonToolbar>
			      <Button bsStyle="primary" bsSize="small">Small button</Button>
			      <Button bsSize="small">Small button</Button>
			    </ButtonToolbar>
			    <ButtonToolbar>
			      <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
			      <Button bsSize="xsmall">Extra small button</Button>
			    </ButtonToolbar>
			  </div>
			);
			
			ReactDOM.render(buttonsInstance, mountNode);
		</script>
		
		<div id="example"></div>
		
	    <script type="text/babel">
	      ReactDOM.render(
	        <h1>Hello, world!</h1>,
	        document.getElementById('example')
	      );
	    </script>
	</body>
</html>
